<template>
    <div class="chart" ref="chart"></div>
</template>

<script>
import * as echarts from "echarts"
export default {
    name: 'progressChart',
    data(){
        return {
         }
    },
    mounted(){
        let progressChart=echarts.init(this.$refs.chart);
        progressChart.setOption({
            xAxis:{
                show:false,
                max:100,
                min:0
            },
            yAxis:{
                show:false,
                type:"category"
            },
            grid:{
                top:0,
                bottom:0,
                left:0,
                right:0
            },
            series:{
                type:"bar",
                data:[76],
                color:"green",
                barWidth:10,
                showBackground:true,
                backgroundStyle:{
                    color: 'rgba(180, 180, 180, 0.2)'
                },
                // 展示进度条竖线
                label:{
                    show:true,
                    formatter:"|",
                    position: "right"
                }
            }
        })
    }
}
</script>

<style scoped>
.chart{
    height: 100%;
    width: 100%;
}
</style>
